<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <script src="../js/vue.min.js"></script>
    <script src="../js/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        body {
            background-image: url("https://img0.baidu.com/it/u=3943064272,3948814879&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            min-height: 100vh;
            width: 100vm;
        }

        em {
            width: 60px;
            height: 60px;
            position: relative;
            border-radius: 50%;
            margin: 0 5px;
            display: inline-block;
            background-color: yellow;
            /* 50px 是阴影程度  5px 是偏移量*/
            box-shadow: 0 0 30px 5px #79bcec, 0 0 150px 5px greenyellow;
            /*animation: hd 5s linear infinite;*/
            animation: hd 3s linear infinite;
            animation-duration: calc(300s / var(--duration));
        }

        em:nth-of-type(even) {
            background-color: bisque;
            box-shadow: 0 0 50px 5px bisque,
            0 0 150px 5px bisque;
        }

        @keyframes hd {
            from {
                transform: translateY(100vh) scale(0);
            }
            to {
                transform: translateY(-100vh) scale(1);
            }
        }

        #app {
            margin: auto;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }

        .image {
            width: 100px;
            margin-top: 20px;
        }

        .zhuce {
            text-decoration: none;
            color: #c2e7b0;
            font-size: 16px;
        }

        .image_1:hover {
            box-shadow: 10px 10px 10px -4px black;
        }

        #abc {
            margin-top: 50px;
            padding-left: 0px;
        }


    </style>
</head>
<body>
<div id="app" style="margin-left: 36%;margin-top: 5%">
    <el-container>

        <template>
            <div class="demo-type ">
                <div style="padding-left: 150px">
                    <el-avatar src="https://img.tukuppt.com/png_preview/00/24/92/hvbNX4j3lq.jpg%21/fw/780" :size="200"
                               fit="contain" class="image_1"></el-avatar>
                </div>
                <div id="abc">
                    <el-form label-width="100px" style="background-color: transparent;color: white">
                        <el-form-item label="用户名:" >
                            <!--                        <i class="el-icon-s-custom" style="margin: 0px"></i>-->
                            <el-input
                                    placeholder="请输入用户名"
                                    v-model="username"
                                    clearable style="color: white"
                            >
                            </el-input>
                        </el-form-item>
                        <el-form-item label="密码" prop="pass">

                            <el-input
                                    type="password"
                                    placeholder="请输入密码"
                                    v-model="pass" autocomplete="off"
                                    clearable
                            >
                            </el-input>
                        </el-form-item>
                        <el-form-item label="验证码" style="height: 80px">
                            <el-input
                                    placeholder="请输入验证码"
                                    v-model="yzm"
                                    clearable>
                            </el-input>
                            <el-image src="../vcode.s" onclick='this.src="../vcode.s?date="+new Date().getTime()' class="image"></el-image>
                        </el-form-item>
                        <el-button type="text" @click="location.href='../email.jsp'" style="padding-left: 100px">忘记密码
                        </el-button>
                        <el-button type="text" style="padding-left: 50px"><a href="Logon_M.html" class="zhuce">注册</a>
                        </el-button>
                        <el-form-item>
                            <el-button type="primary" @click="login">登录</el-button>
                            <el-button>取消</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <!--                <div class="Switch">-->
                <!--                    <el-switch-->
                <!--                            v-model="value"-->
                <!--                            active-color="#13ce66"-->
                <!--                            inactive-color="black">-->
                <!--                    </el-switch>-->
                <!--                </div>-->
            </div>
        </template>
    </el-container>
</div>
<script>
    var vue = new Vue({
        el: "#app",
        data() {
            //用户名正则，4到16位（字母，数字，下划线，减号）

            return {
                form: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: '',

                },
                pass: '',
                value: true,
                username: "",
                yzm: "",
                dialogFormVisible: false,
                formLabelWidth: '120px',
                email: ""
            }
        },
        methods: {
            login() {
                axios({
                    url: "../UserLogin.s",
                    params: {
                        username: this.username,
                        pass: this.pass,
                        yzm: this.yzm
                    }
                }).then(res => {
                    this.$message(res.data.msg);
                    if (res.data.code==1){
                        window.location.replace(document.referrer);
                    }
                })
            },
            exit(){
                window.location.href = "../index.html";
            }
        },

    });

</script>
<script type="module">
    for (let i = 0; i < 100; i++) {
        const el = document.createElement('em')
        el.style.cssText =
            `--duration:` + (Math.random() * 50 + 10)
        document.body.appendChild(el)
    }
    var uPattern = /^[a-zA-Z0-9_-]{4,16}$/;

    //输出 true
    console.log(uPattern.test("iFat3"));
</script>

</body>
</html>